<template>
  <div class="user-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        用户管理
        <span class="second">/{{ title }}</span>
      </div>
    </div>
    <div class="ucon-header">
      <!-- <ul>
        <li>用户详情</li>
        <li>编辑资料</li>
        <li>登录日志</li>
        <li>用户名片</li>
      </ul>-->
      <div class="bar" />
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="用户详情"
          name="first"
        >
          <userdetail />
        </el-tab-pane>
        <el-tab-pane
          label="编辑资料"
          name="second"
        >
          <editdata />
        </el-tab-pane>
        <el-tab-pane
          label="登录日志"
          name="third"
        >
          <loginlog />
        </el-tab-pane>
        <el-tab-pane
          label="用户名片"
          name="fourth"
        >
          <usercard />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="margin-top: 200px;"></div>
  </div>
</template>

<script>
// import userTitle from '../../components/user-title/index';
import userdetail from '../../../components/userManage/userDetail'
import editdata from '../../../components/userManage/editData'
import loginlog from '../../../components/userManage/loginLog'
import usercard from '../../../components/userManage/userCard'
export default {
  components: {
    userdetail,
    editdata,
    loginlog,
    usercard
  },
  data() {
    return {
      activeName: 'first',
      title: '用户详情'
    }
  },
  methods: {
    // 面包屑导航
    handleClick(tab, event) {
      const dtitle = tab.label
      this.title = dtitle
    }
  }
}
</script>
<style lang="scss" scoped>
.user-container {
  margin: 0;
  margin-left: 29px;
  padding: 0;
  .dashboard-text {
    margin-top: 17px;
    width: 1517px;
    height: 37px;
    margin-bottom: 16px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
      .second {
        color: #333;
      }
    }
  }
  .ucon-header {
    width: 1517px;
    color: #333;
    position: relative;
    .bar {
      position: absolute;
      left: 452px;
      height: 3px;
      background: #fff;
      width: 1063px;
      top: 40px;
      z-index: 99;
    }
  }
  .usercon {
    margin-top: 26px;
    width: 1549px;
    height: 330px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
}
</style>

